<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <head th:include="views/public"/>
</head>
<body class="layui-view-body">
    <div id="vm" class="layui-content">
        <div style="margin-left: 1%;padding-top: 1%">
            <el-form :model="form" ref="form1" :inline="true" label-width="68px">
                <el-form-item label="用户名称" prop="username">
                    <el-input   placeholder="请输入用户名称" v-model="form.username"  clearable size="small" class="search-input" @keyup.enter.native="search"/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status"  placeholder="用户状态" class="search-input"  @change="statusChange" clearable size="small" >
                        <el-option v-for="dict in statusOptions" :key="dict.dictLabel" :label="dict.dictValue" :value="dict.dictLabel"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset('form1')">重置</el-button>
                    <el-button-group>
                        <el-tooltip class="item" effect="Light" content="添加用户" placement="bottom">
                            <el-button type="primary" size="mini" @click="add" icon="el-icon-plus"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="Light" content="批量删除" placement="bottom">
                            <el-button type="danger" size="mini" @click="remove"  icon="el-icon-delete"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="Light" content="批量导入" placement="bottom">
                            <el-button type="primary"   size="mini" icon="el-icon-upload2"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="Light"  content="不勾选导出全部数据" placement="bottom">
                            <el-button type="primary"   size="mini" @click="exportData" icon="el-icon-download"></el-button>
                        </el-tooltip>
                    </el-button-group>
                </el-form-item>
            </el-form>
        </div>
        <template>
            <el-table  ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 98%;margin-left: 1%" @selection-change="selectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="username" label="姓名"> </el-table-column>
                <el-table-column prop="gender" label="性别" > </el-table-column>
                <el-table-column prop="dept.name" label="部门"> </el-table-column>
                <el-table-column prop="email" label="邮箱"> </el-table-column>
                <el-table-column prop="mobile" label="手机号"> </el-table-column>
                <el-table-column prop="status" label="状态"> </el-table-column>
                <el-table-column prop="createTime" label="创建时间"> </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--page-->
        <div class="block" style="padding-top: 1%">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                    :page-sizes="[10, 30, 50, 100, 300]" background :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
        <!--修改-->
        <el-dialog :title="title" width="36%"  :visible.sync="dialogFormVisible">
            <el-form :model="respForm"  ref="respForm" :rules="rules" :label-width="formLabelWidth">
                <el-row>

                    <el-col :span="12">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="respForm.username" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="所属部门" prop="deptId">
                            <treeselect v-model="respForm.deptId"   placeholder="请选择所属部门" :options="options" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="respForm.mobile" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="respForm.userId == undefined" label="用户密码" prop="password">
                            <el-input v-model="respForm.password" placeholder="请输入用户密码" type="password" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="respForm.email" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="岗位">
                            <el-select v-model="respForm.postIds" multiple filterable collapse-tags placeholder="请选择">
                                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色" >
                            <el-select v-model="respForm.roleIds" multiple filterable collapse-tags placeholder="请选择">
                                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别">
                            <el-select v-model="respForm.gender" filterable placeholder="请选择">
                                <el-option v-for="item in genderOptions" :key="item.dictLabel" :label="item.dictValue" :value="item.dictLabel"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-radio-group v-model="respForm.status" size="medium">
                                <el-radio v-for="dict in statusOptions" :label="dict.dictLabel"><a v-text="dict.dictValue"></a></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注">
                            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="respForm.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('respForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script th:src="@{/assets/js/sys/user.js}"></script>
</body>
</html>